<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // ref 可以在React当中获取到真实DOM
    // 应用场景：1-与组件结合使用 2-与普通元素结合使用
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    class App extends React.Component {
        render() {
            return (
                <form name={"myForm"}>
                    <div ref={(el)=>{
                        // el即是ref属性所在的真实DOM元素
                        // console.log("10000000",el)
                        this.myDiv = el;
                    }}>100</div>
                    <input ref={el=>this.userName=el} name={"userName"} type="text"/>
                    <Child ref={el=>this.child=el}></Child>
                    <button onClick={(e) => {
                        e.preventDefault();
                        // console.log(this.myDiv.innerText)
                        // console.log(this.userName.value)
                        // console.log(this.child.state.a)
                        // console.log(this.child.state.b)
                        this.child.setState({
                            a:100,
                            b:200
                        })

                    }}>点我
                    </button>
                </form>
            )
        }
    }

    class Child extends React.Component {
        state = {
            a: 1,
            b: 2
        }

        render() {
            return (
                <div>
                    <h3>Child</h3>
                    <p>a:{this.state.a}</p>
                    <p>b:{this.state.b}</p>
                </div>
            )
        }
    }

    root.render((
        <App></App>
    ))
</script>
</html>